<style lang="less">
    @import "../../../../styles/common.less";
</style>

<template>
    <div>
        <Card dis-hover :bordered="false">
            <Form ref="searchFrom" :model="searchFrom" class="searchForm"  inline>
                <FormItem prop="roleName">
                    <Input type="text" v-model="searchFrom.roleName" placeholder="请输入角色名称" >
                    </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" icon="ios-search-strong" @click="handleSearch">搜索</Button>
                    <Button type="ghost"   @click="handleReset('searchFrom')">重置</Button>
                </FormItem>
            </Form>
            <Row style="margin-bottom: 20px">
                <Button type="primary" icon="plus-round" v-has="'role:add'" @click="addRole(1)">新增</Button>
                <Button type="success" icon="edit" v-has="'role:update'"  @click="addRole(2)">修改</Button>
                <Poptip v-has="'role:del'"
                        confirm
                        title="您确认要删除选中的记录么？"
                        @on-ok="deleteRole"
                        ok-text="确认"
                        placement="right-start"
                        cancel-text="取消">
                    <Button type="error" icon="android-remove" >删除</Button>
                </Poptip>
            </Row>
            <Row>
                <Table border
                       highlight-row
                       ref="currentRowTable"
                       :loading="is_loading"
                       :columns="DataColumns"
                       :data="tableData"
                       @on-current-change="handleRowChange"></Table>
                <Page :total="dataCount"
                      :page-size="pageSize"
                      :show-total="true"
                      class-name="comPage"
                      show-sizer
                      @on-change="changePage"></Page>
            </Row>
        </Card>
    </div>
</template>

<script>
  import { fetchGetData,fetchPostData,adminUrl } from '@/libs/fetch.js'
  import util from '@/libs/util.js'
  export default {
    name: 'roleList',
    data () {
      return {
        searchFrom:{
          roleName:''
        },
        dataCount: 0, // 初始化信息总条数
        pageSize: 10, // 每页显示多少条
        is_loading:true,
        DataColumns: [
          {
            title:'编号',
            type: 'index',
            align:'center'
          },{
            title:'角色名称',
            key:'roleName',
            align:'center'
          },{
            title:'所属部门',
            key:'deptName',
            align:'center'
          },{
            title: '是否可用',
            key:'useable',
            align:'center',
            render: (h,params) => {
              const value = params.row.useable == '1' ? '是' : '否';
              return h('div', value);
            }
          },{
            title:'备注',
            key:'remarks',
            align:'center'
          },{
            title:'创建时间',
            key:'createDate',
            align:'center'
          },{
            title:'更新时间',
            key:'updateTime',
            align:'center'
          }],
        tableData:[],
        selectRowData:{},
      };
    },
    methods: {
      //搜索
      handleSearch(){
        this.getTableDataList(1,this.pageSize);
      },
      //重置搜索表单
      handleReset(name){
        this.$refs[name].resetFields();
      },
      //选中表格的行
      handleRowChange (currentRow, oldCurrentRow) {
        this.selectRowData = currentRow;
      },
      //加载表格数据
      getTableDataList(pageNum, pageSize){
        this.$Loading.start()
        fetchGetData(adminUrl+'/admin/role/list',{
          pageNum: pageNum,
          pageSize: pageSize,
          roleName: this.searchFrom.roleName
        }).then(data=>{
          if(data.status==1){
            this.is_loading = false;
            this.$Loading.finish();
            this.dataCount=data.data.total;
            this.tableData=data.data.rows;
          }else{
            this.is_loading = false;
            this.$Message.error(data.message);
          }
        });
      },
      changePage(index) {
        this.getTableDataList(index, this.pageSize);
      },
      addRole(index){
        if(index==1){//新增
          this.$router.push({name: 'addRole_index'});
        }else if(index==2){//修改
          if(this.selectRowData.id){
            this.$router.push({name: 'addRole_index',query:{id:this.selectRowData.id}});
          }else{
            this.$Message.error('请选中要修改的行');
          }
        }
      },
      deleteRole(){
        if(this.selectRowData.id){
          fetchPostData(adminUrl+'/admin/role/del/'+this.selectRowData.id,{}).then(data=>{
            if(data.status==1){
              let _that=this;
              this.$Notice.success({
                title: data.message,
                duration:2,
                onClose:function () {
                  _that.getTableDataList(1,this.pageSize);
                }
              })
            }else{
              this.$Message.error(data.message);
            }
          });
        }else{
          this.$Message.error('请先选中要删除的行');
        }
      }
    },
    created(){
      this.getTableDataList(1,this.pageSize);
    }
  };
</script>